import React, { lazy, Suspense } from "react";
import { Navigate, Outlet, useRoutes } from "react-router-dom";
import Loading from "@/components/Loading";
import AuthComponent from "@/components/AuthComponent";
import Index from "@/pages/Index";
// 封装一个用于提供懒 加载的方法
const lazyLoading = function (path: string) {
    const Com = lazy(() => import("@/pages/" + path));
    return (
        <Suspense fallback={<Loading />}>
            <Com></Com>
        </Suspense>
    )
}
export default function () {
    const renderRouter = useRoutes([
        {
            path: "/",
            element: (
                <AuthComponent>
                    {/* {lazyLoading("Index")} */}
                    <Index/>
                </AuthComponent>
            ),
            // 增加主页详情路由
            children: [
                {
                    index: true,
                    element: lazyLoading("Home")
                }, {
                    path: '/cmn',
                    element: <Outlet />,
                    children: [
                        {
                            index: true,
                            element:<Navigate to={"dict"}></Navigate>
                        },
                        {
                            path: "dict",
                            element:lazyLoading("cmn/dict")
                        }
                    ]
                }
            ]
        }, {
            path: "/login",
            element: lazyLoading("Login")
        }, {
            path: "*",
            element: lazyLoading("NotFound")
        }
    ])
    return renderRouter;
}